﻿<html>
<head>
    <script src="js/jquery-1.8.2.js" type="text/javascript"></script>
    <style type="text/css">
        body {
            margin: 0;
            overflow: hidden;
            background: rgba(0,0,0,0.8);
        }

        #picintro {
            height: 20%;
            color: #fff;
            position: absolute;
            background: rgba(0,0,0,0.5);
            bottom: 0;
            display: none;
            color: rgba(255,255,255,0.8);
            overflow-y: auto;
            line-height: 150%;
            font-family: "tahoma","Hiragino Sans GB","Segoe UI","Microsoft Yahei","微软雅黑",Tahoma,Arial,STHeiti,sans-serif;
        }

            #picintro::-webkit-scrollbar {
                width: 10px;
            }

            #picintro::-webkit-scrollbar-track-piece {
                background: rgba(0,0,0,0.3);
                border-radius: 5px;
            }

            #picintro::-webkit-scrollbar-thumb {
                background: rgba(0,0,0,0.6);
                border-radius: 5px;
            }

        .picleft {
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 100%;
            background: url(images/arrow_left.png) 5% center no-repeat;
        }

        .picright {
            position: absolute;
            right: 0;
            top: 0;
            width: 50%;
            height: 100%;
            background: url(images/arrow_right.png) 95% center no-repeat;
        }

        .pic_title {
            position: absolute;
            top: 3%;
            color: #fff;
        }

        .font {
            font-family: "tahoma","Hiragino Sans GB","Segoe UI","Microsoft Yahei","微软雅黑",Tahoma,Arial,STHeiti,sans-serif;
        }
    </style>
    <script type="text/javascript">
        var timer;
        $(function () {
            if ($('table').size()) {
                $('table').hide();
                $('#picintro').show();
            }
            var w = document.body.clientWidth - 40;
            var h = document.body.clientHeight - 40;
            $('#picintro').css({
                'left': 0,
                'right': 0,
                'padding': '10px 20px'
            });
            $('img').siblings('br').remove();
            $('img').each(function () {
                var _this = $(this);
                var img = new Image();
                img.src = _this.attr('src');
                if (img.complete) {
                    _this.attr('src', img.src);
                    var imgw = img.width;
                    var imgh = img.height;
                    if (img.width > w || img.height > h) {
                        var scale = w / imgw;
                        if (h / imgh < scale) {
                            scale = h / imgh;
                        }
                        imgw = imgw * scale;
                        imgh = imgh * scale;
                    }
               
                }
                img.onload = function () {
                    _this.attr('src', img.src);
                    var imgw = img.width;
                    var imgh = img.height;
                    if (img.width > w || img.height > h) {
                        var scale = w / imgw;
                        if (h / imgh < scale) {
                            scale = h / imgh;
                        }
                        imgw = imgw * scale;
                        imgh = imgh * scale;
                    }
                }
            });
            $('img').hide();
            $('img').eq(0).show();
            if ($('table').size()) {
                $('#picintro').html($('tr').eq(0).html());
            }
            var count = $('img').size();
            //var i = 0;
            //timer = setInterval(function () {
            //    i++;
            //    if (i >= count) {
            //        i = 0;
            //    }
            //    $('img').hide();
            //    $('img').eq(i).fadeIn();
            //    if ($('table').size()) {
            //        $('#picintro').html($('tr').eq(i).find('td').html());
            //    }

            //}, 6000);
            $('.picright').click(function () {
                clearInterval(timer);
                i++;
                if (i >= count) {
                    i = 0;
                }
                $('img').hide();
                $('img').eq(i).fadeIn();
                if ($('table').size()) {
                    $('#picintro').html($('tr').eq(i).find('td').html());
                }
                timer = setInterval(function () {
                    i++;
                    if (i >= count) {
                        i = 0;
                    }
                    $('img').hide();
                    $('img').eq(i).fadeIn();
                    if ($('table').size()) {
                        $('#picintro').html($('tr').eq(i).find('td').html());
                    }
                }, 6000);
            });
            $('.picleft').click(function () {
                clearInterval(timer);
                i--;
                if (i < 0) {
                    i = count - 1;
                }
                $('img').hide();
                $('img').eq(i).fadeIn();
                if ($('table').size()) {
                    $('#picintro').html($('tr').eq(i).find('td').html());
                }
                timer = setInterval(function () {
                    i++;
                    if (i >= count) {
                        i = 0;
                    }
                    $('img').hide();
                    $('img').eq(i).fadeIn();
                    if ($('table').size()) {
                        $('#picintro').html($('tr').eq(i).find('td').html());
                    }
                }, 6000);
            });
            var startx = 0;
            window.ontouchstart = function (e) {
                var touch = e.touches[0];
                startx = touch.clientX;
            }
            window.ontouchend = function (e) {
                var touch = e.touches[0];
                var endx = touch.clientX;
                if (endx - startx < -100) {
                    clearInterval(timer);
                    i++;
                    if (i >= count) {
                        i = 0;
                    }
                    $('img').hide();
                    $('img').eq(i).fadeIn();
                    if ($('table').size()) {
                        $('#picintro').html($('tr').eq(i).find('td').html());
                    }
                    timer = setInterval(function () {
                        i++;
                        if (i >= count) {
                            i = 0;
                        }
                        $('img').hide();
                        $('img').eq(i).fadeIn();
                        if ($('table').size()) {
                            $('#picintro').html($('tr').eq(i).find('td').html());
                        }
                    }, 6000);
                } else if (endx - startx > 100) {
                    clearInterval(timer);
                    i--;
                    if (i < 0) {
                        i = count - 1;
                    }
                    $('img').hide();
                    $('img').eq(i).fadeIn();
                    if ($('table').size()) {
                        $('#picintro').html($('tr').eq(i).find('td').html());
                    }
                    timer = setInterval(function () {
                        i++;
                        if (i >= count) {
                            i = 0;
                        }
                        $('img').hide();
                        $('img').eq(i).fadeIn();
                        if ($('table').size()) {
                            $('#picintro').html($('tr').eq(i).find('td').html());
                        }
                    }, 6000);
                }
            }
            var ratio = document.body.clientWidth / 1440;
            var pt = document.getElementById('pic_title');
            if (pt) {
                pt.style.fontSize = Math.round(40 * ratio) + 'px';
            }
        });
    </script>
</head>
<body>
    <img alt="" data-pinit="registered" src="http://wenbo.yowo.cn/uploadfile/2013/0930/20130930101150420.jpg" style="width: 100%; height: 100%" />
    <img alt="" data-pinit="registered" src="http://wenbo.yowo.cn/uploadfile/2013/0930/20130930101157131.jpg" style="width: 100%; height: 100%" />
    <div id="picintro" class="font"></div>
    <div class="picleft"></div>
    <div class="picright"></div>
</body>
</html>
